Gutenify – Visual Site Builder Blocks & Starter Templates / 0.0.2

Gutenify – Visual Site Builder Blocks & Starter Templates v0.0.2

gutenify / src / components / blocks / google-maps / controls / GutenifyRangeControl copy.js

GutenifyRangeControl copy.js in Gutenify – Visual Site Builder Blocks & Starter Templates 0.0.2, at src/components/blocks/google-maps/controls/GutenifyRangeControl copy.js

161 lines 6.1 KB

Raw Download Zip

1	import { Component } from '@wordpress/element';
2	import { PanelRow, RangeControl, Icon } from '@wordpress/components';
3
4	class GutenifyRangeControl extends Component {
5	constructor(props) {
6	super(props);
7	let defaults = {};
8	if(props.defaults){
9	defaults = props.defaults;
10	}
11	this.defaults = {...{
12	desktop: {
13	value: '',
14	unit: '%'
15	},
16	tablet: {
17	value: '',
18	unit: '%'
19	},
20	mobile: {
21	value: '',
22	unit: '%'
23	}
24	},...defaults}
25
26	this.defaultUnits = [ '%', 'px' ];
27
28	let units = [ '%', 'px' ];
29	if(props.units){
30	units = props.units;
31	}
32	const data = { ...this.defaults, ...props.value };
33	this.state = {
34	viewport: 'desktop',
35	unit: data.desktop.unit,
36	showViewports: false,
37	data,
38	units
39	}
40
41
42	this.onUpdateRange = this.onUpdateRange.bind(this);
43	this.onChangeViewPort = this.onChangeViewPort.bind(this);
44	this.onResetRange = this.onResetRange.bind(this);
45	}
46
47	onUpdateRange(value) {
48
49	let data = {
50	...this.state.data,
51	[this.state.viewport]: {
52	...this.state.data[this.state.viewport],
53	value
54	}
55	}
56	this.setState({
57	data
58	});
59
60	this.props.onChange(data)
61	}
62
63	onChangeViewPort(viewport) {
64	this.setState({
65	viewport,
66	unit: this.state.data[viewport].unit,
67	showViewports: true
68	});
69	}
70
71	onChangeUnit(unit) {
72	let data = {
73	...this.state.data,
74	[this.state.viewport]: {
75	...this.state.data[this.state.viewport],
76	unit
77	}
78	}
79	this.setState({
80	data,
81	unit,
82	showViewports: true
83	});
84	this.props.onChange(data)
85	}
86
87	onResetRange() {
88	const value = this.defaults[this.state.viewport].value;
89	const unit = this.defaults[this.state.viewport].unit;
90	let data = {
91	...this.state.data,
92	[this.state.viewport]: {
93	...this.state.data[this.state.viewport],
94	value,
95	unit
96	}
97	}
98	// console.log(data);
99
100	this.setState({
101	data
102	});
103	this.setState({
104	unit
105	});
106	this.props.onChange(data)
107	}
108
109	render() {
110	const viewport = this.state.viewport;
111	const unit = this.state.unit;
112	// const data = this.state.data;
113
114	return <>
115	<PanelRow className="gutenify-range-control-label-row">
116	<div className="gutenify-range-control-label-wrap">
117	{this.props.label&&<label>{this.props.label} </label>}
118	{/* <Button onClick={() => this.onResetRange()} className="gutenify-range-control-reset"><Icon icon="image-rotate" size={10}/></Button> */}
119	<div className="gutenify-range-control-viewport">
120	<span className={'desktop' === viewport ? 'active' : ''} onClick={() => this.onChangeViewPort('desktop')}><Icon icon="laptop" size={12} /></span>
121	{this.state.showViewports && <>
122	<span className={'tablet' === viewport ? 'active' : ''} onClick={() => this.onChangeViewPort('tablet')}><Icon icon="tablet" size={12} /></span>
123	<span className={'mobile' === viewport ? 'active' : ''} onClick={() => this.onChangeViewPort('mobile')}><Icon icon="smartphone" size={12} /></span>
124
125	</>}
126	{/* <ButtonGroup className="gutenify-range-control-viewports">
127	<Button isPrimary={'desktop' === viewport ? true : false} isDefault={'desktop' !== viewport ? true : false} onClick={() => this.onChangeViewPort('desktop')}><Icon icon="laptop" size={15} /></Button>
128	<Button isPrimary={'tablet' === viewport ? true : false} isDefault={'tablet' !== viewport ? true : false} onClick={() => this.onChangeViewPort('tablet')}><Icon icon="tablet" size={15}/></Button>
129	<Button isPrimary={'mobile' === viewport ? true : false} isDefault={'mobile' !== viewport ? true : false} onClick={() => this.onChangeViewPort('mobile')}><Icon icon="smartphone" size={15}/></Button>
130
131	</ButtonGroup> */}
132	</div>
133	</div>
134	<div className="gutenify-range-control-unit">
135	{this.state.units.map((unitIcon)=>{
136	return <span className={unitIcon === unit ? 'active' : ''} onClick={() => this.onChangeUnit(unitIcon)}>{unitIcon}</span>
137	})}
138	{/* <span className={'%' === unit ? 'active' : ''} onClick={() => this.onChangeUnit('%')}>%</span>
139	<span className={'px' === unit ? 'active' : ''} onClick={() => this.onChangeUnit('px')}>PX</span> */}
140	{/* <span className={'em' === unit ? 'active' : ''} onClick={() => this.onChangeUnit('em')}>EM</span> */}
141	{/* <ButtonGroup>
142	<Button isPrimary={'%' === unit ? true : false} isDefault={'%' !== unit ? true : false} onClick={() => this.onChangeUnit('%')}>%</Button>
143	<Button isPrimary={'px' === unit ? true : false} isDefault={'px' !== unit ? true : false} onClick={() => this.onChangeUnit('px')}>PX</Button>
144	</ButtonGroup> */}
145	</div>
146	</PanelRow>
147	<PanelRow>
148	<RangeControl
149	// label="Columns"
150	value={this.state.data[viewport].value}
151	onChange={(value) => this.onUpdateRange(value)}
152	// min={1}
153	initialPosition={100}
154	// allowReset={true}
155	/>
156	</PanelRow>
157	</>;
158	}
159	}
160
161	export default GutenifyRangeControl;